<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>订单管理</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入element-UI样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../plugins/element-ui/icon/iconfont.css" />
    <!-- 引入CSS -->
    <link rel="stylesheet" href="../css/order.css" />
    <link rel="stylesheet" href="../css/all.css" />
</head>
    <div class="container" id="order-app">
        <!-- 搜索项 -->
        <div class="tableBar">
            <el-input v-model="input" placeholder="请输入订单号" style="width: 250px">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
            </el-input>
            <el-date-picker v-model="orderTime"
                            clearable
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            placeholder="选择日期"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            style="width: 400px;margin-left: 20px;">
            </el-date-picker>
            <el-button type="primary" class="search-btn" @click="init">查询</el-button>
        </div>
        <!-- 查看订单信息 -->
        <el-table :data="tableData" stripe class="tableBox" height="450">
            <el-table-column prop="id" label="订单号" min-width="110"></el-table-column>
            <el-table-column prop="订单状态" label="订单状态">
                <template slot-scope="{ row }"><span>{{ getOrderType(row) }}</span></template>
            </el-table-column>
            <el-table-column prop="orderTime" label="下单时间" min-width="100"></el-table-column>
            <el-table-column prop="checkoutTime" label="结账时间" min-width="100"></el-table-column>
            <el-table-column prop="payMethod" label="支付方式"></el-table-column>
            <el-table-column prop="amount" label="实收金额">
                <template slot-scope="{ row }"><span>￥{{ row.amount }}</span></template>
            </el-table-column>
            <el-table-column prop="btn" label="操作">
                <template slot-scope="{ row }">
                    <el-button type="text" @click="goDetail(row.id)" class="blueBug">查看</el-button>
                    <el-divider v-if="row.status === 2" direction="vertical"></el-divider>      <!-- 分隔符 -->
                    <el-button v-if="row.status === 2" type="text" @click="setStatus(row.id,2)" class="blueBug">派送</el-button>
                    <el-divider v-if="row.status === 3" direction="vertical"></el-divider>
                    <el-button v-if="row.status === 3" type="text" @click="setStatus(row.id,3)" class="blueBug">完成</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 查看订单详情窗 -->
        <el-dialog title="查看订单详情" :visible.sync="dialogReadFormVisible" :fullscreen="true">
            <!-- label-position:表单域标签的位置,label-width:表单域标签的宽度 -->
            <div>
                <div style="border-top: 1px solid;margin-top: 10px;margin-left: 10px;font-size: 15px;color: #5daf34;">
                    <span>订单ID:&nbsp&nbsp{{orderDto.id}}</span>
                </div>
                <div style="border-top: 1px solid;margin-top: 20px;margin-left: 10px;font-size: 10px;">
                    <span>收货人:&nbsp&nbsp{{orderDto.name}}</span>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <span>手机号:&nbsp&nbsp{{orderDto.phone}}</span>
                </div>
                <div style="border-top: 1px solid;margin-top: 20px;margin-left: 10px;font-size: 10px;">
                    <span>下单时间:&nbsp{{orderDto.orderTime}}</span>
                </div>
                <div style="border-top: 1px solid;margin-top: 20px;margin-left: 10px;font-size: 10px;"><span>收货地址:&nbsp&nbsp{{orderDto.detail}}</span></div>
                <div style="border-top: 1px solid;margin-top: 20px;margin-left: 10px;font-size: 12px;color: #ef8c78;">
                    <span>结账时间:&nbsp&nbsp{{orderDto.checkoutTime}}</span>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <span>支付方式:&nbsp&nbsp{{orderDto.payMethod}}</span>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <span>总金额:&nbsp&nbsp{{orderDto.amount}}</span>
                </div>
            </div>
            <el-table :data="orderDto.list" stripe class="tableBox" height="300" :header-cell-style="{background:'#d3dce6',color:'#606266'}">
                <el-table-column prop="image" label="图片" align="center">
                    <template slot-scope="{ row }">
                        <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="row.image">
                            <div slot="error" class="image-slot"><img src="../images/noImg.png"  style="width: auto; height: 40px; border:none;" ></div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名" ></el-table-column>
                <el-table-column prop="category" label="商品类型">
                    <template slot-scope="{ row }">
                        {{row.dishId==null?'菜品':'套餐'}}
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="数量"></el-table-column>
                <el-table-column prop="amount" label="商品总价" ></el-table-column>
            </el-table>
            <div class="tableLab" style="text-align: right;color: #DD4A68;font-size: 25px">
                <el-divider direction="vertical"></el-divider>     <!-- 分隔符 -->
                <span class="amountSpan">总收金额:&nbsp{{orderDto.amount}}元</span>
                <el-divider direction="vertical"></el-divider>     <!-- 分隔符 -->
            </div>
        </el-dialog>
        <!-- 底部 -->
        <el-pagination class="pageList"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       :current-page.sync="currentPage"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
<body>
    <!-- 引入VUE组件 -->
    <script src="../plugins/vue/vue.js"></script>
    <!-- 引入element-UI组件库 -->
    <script src="../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugins/axios/axios.min.js"></script>
    <!-- 引入JS -->
    <script src="../js/order.js"></script>
</body>
</html>